<template>
	<view class="pageBox">
		<!--团队PV-->
		<view class="headerBox">
			<view class="headerContent">
				<view class="headerNavbar">
					<text class="wlIcon-fanhui1 text-white" @tap="$wanlshop.back(1)"></text>
					<view class="headerTitle">团队年PV</view>
				</view>
			</view>
		</view>
		
		<view class="total_pv">总业绩: {{total_pv || 0}}</view>
		
		<view class="list">
			<view class="list-item" 
			v-for="(item, index) in dataList" 
			:key="index"
			@click="goMonth(item.time)"
			>
				<view class="info-box">
					<view class="nickname">{{item.date || ''}}</view>
					<view class="pv">{{item.pv || '0'}}</view>
				</view>
			</view>
		</view>
			
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
	components: {
		
	},
	data() {
		return {
			dataList:[],
			total_pv:0,
		}
	},
	onLoad() {
		this.getList();
	},
	onShow(){
		
	},
	methods: {
		getList(){
			let that = this;
			
			uni.request({
				url: '/user/myteampv',
				data: {
					type:1
				},
				success: res => {
					res = res.res
					if (res.code === 1) {
						that.dataList = [...that.dataList, ...res.data.data];
						that.total_pv = res.data.total_pv;
					}
				}
			});
		},
		goMonth(year){
			uni.navigateTo({
				url: '/pages/new/teampvMonth?year='+year,
			})
		}
	}
}
</script>


<style>
page{
	background-color:  #ffffff !important;	
}
</style>


<style scoped lang="scss">
	
.headerBox{
	
	.headerContent{
		width: 750rpx;
		height: 200rpx;
		background: #9C3928;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		padding-top:115rpx;
	}
	
	.headerNavbar{
		display: flex;
		padding-left: 33rpx;
	}
	
	.headerTitle{
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		padding-left: 246rpx;
	}
	
	.headerBody{
		width: 702rpx;
		height: 336rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 48rpx;
		margin-left: 24rpx;
		display: flex;
		justify-content: flex-start;
		padding: 31rpx 32rpx;
		flex-direction: column;
	}
	
	.numBox{
		margin-top: 58rpx;
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		justify-content: space-between;
		padding: 0rpx 80rpx;
	}
	
	.num-item{
		display: flex;
		flex-direction: column;
	}
	
	.value{
		font-size: 64rpx;
		font-family: Roboto-Medium, Roboto;
		font-weight: 700;
		color: #FFFFFF;
		line-height: 75rpx;
	}
	
	.title{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 33rpx;
		margin-top: 12rpx;
	}
	
	.line{
		width: 1rpx;
		height: 110rpx;
		background-color: rgba(255,255,255,0.41);
	}
}	

.title-box{
	display: flex;
	margin-top: 34rpx;
	margin-left: 32rpx;
	
	.user-image{
		width: 48rpx;
		height: 48rpx;
		margin-right: 24rpx;
	}
	
	.record-title{
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #9C3928;
		line-height: 42rpx;
	}
}	

.list{
	margin-top: 24rpx;
	
	.list-item{
		//padding: 18rpx 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.avatar{
		width: 84rpx;
		height: 84rpx;
		opacity: 1;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	
	.info-box{
		display: flex;
		flex: 1;
		justify-content: space-between;
		align-items: center;
		padding: 18rpx 60rpx;
		border-bottom: 2rpx dashed #dadada;
	}
	
	.nickname{
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #333333;
		line-height: 44rpx;
		margin-right: 22rpx;
	}
	
	.lable{
		font-size: 18rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #FFFFFF;
		line-height: 21rpx;
		background: #FCBB3A;
		border-radius: 26rpx 26rpx 26rpx 26rpx;
		padding: 6rpx 16rpx;
	}
	
	.phone{
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #707070;
		line-height: 44rpx;
		margin-top: 0rpx;
	}
	
	.phone-image{
		width: 52rpx;
		height: 52rpx;
		border-radius: 50%;
	}
}

.title-box{
	display: flex;
	align-items: center;
	padding: 28rpx 30rpx 10rpx 20rpx;
	
	.title{
		display: flex;
		align-items: center;
		padding-right: 10rpx;
		padding-left: 10rpx;
	}
	
	.date{
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #333333;
		line-height: 42rpx;
	}
	
	.down-image{
		width: 28rpx;
		height: 20rpx;
		margin-left: 10rpx;
	}

}

.total_pv{
	display: flex;
	justify-content: flex-end;
	margin: 20rpx 20rpx;
	font-size: 30rpx;
	font-weight: 700;
}	

	
</style>